<template>
    <div class="r-container" style="height: 100%">
        <!-- 功能描述 -->
        <div class="hand">
            <div class="hand-title">
                <h2>
                    <icon name="user"></icon>
                    个人注册用户
                </h2>
            </div>
            <div class="breadcrumb">
                <i class="moe-icon moe-icon-map-marker"></i>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{path: '/'}">我的控制台</el-breadcrumb-item>
                    <el-breadcrumb-item>个人管理</el-breadcrumb-item>
                    <el-breadcrumb-item>注册用户</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <!-- 内容容器 -->
        <div class="container">
            <div class="block block-rounded">
                <div class="block-content">
                    <!-- 选项 -->
                    <div class="block-option">
                        <el-row>
                            <el-col :span="8">
                                <el-input v-model="search.keyword"
                                          size="medium"
                                          class="input-with-select"
                                          placeholder="姓名/用户名/手机号码"
                                          clearable
                                          @keyup.enter.native="handleSearch">
                                    <el-select v-model="search.type"
                                               slot="prepend"
                                               placeholder="不限"
                                               style="width: 90px;">
                                        <el-option label="不限" value=""></el-option>
                                        <el-option label="用户名" value="username"></el-option>
                                        <el-option label="手机号" value="mobile"></el-option>
                                        <el-option label="邮箱" value="email"></el-option>
                                    </el-select>
                                    <el-button slot="append"
                                               icon="el-icon-search"
                                               :loading="search.loading"
                                               @click="handleSearch">搜索
                                    </el-button>
                                </el-input>
                            </el-col>
                            <el-col :span="16" class="text-right">
                                <el-button-group>
                                    <el-button type="primary"
                                               size="medium"
                                               icon="el-icon-refresh"
                                               :loading="operate.loading"
                                               @click="handleReload">重新载入
                                    </el-button>
                                    <el-button type="primary"
                                               icon="el-icon-plus"
                                               size="medium"
                                               @click="openDialogBox">创建
                                    </el-button>
                                </el-button-group>
                            </el-col>
                        </el-row>
                        <div class="r-flex mt-20 font-s14">
                            <div class="r-flex__item">
                                <div class="r-flex">
                                    <div class="text-bold">类型：</div>
                                    <div class="r-flex__item">
                                        <el-select v-model="picker.typeValue"
                                                   placeholder="请选择"
                                                   size="medium"
                                                   style="width: 80px;">
                                            <el-option v-for="item in picker.typeOptions"
                                                       :key="item.value"
                                                       :label="item.label"
                                                       :value="item.value"></el-option>
                                        </el-select>
                                    </div>
                                </div>
                                <div class="ml-10 text-bold">日期：</div>
                                <el-select v-model="picker.dateTypeValue"
                                           size="medium"
                                           placeholder="请选择"
                                           style="width: 80px;">
                                    <el-option v-for="item in picker.dateTypeOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                                <div class="r-flex ml-10">
                                    <div class="r-flex__item">
                                        <el-date-picker range-separator="-"
                                                        start-placeholder="开始日期"
                                                        end-placeholder="结束日期"
                                                        size="medium"
                                                        clearable
                                                        v-model="picker.dateValue"
                                                        :type="picker.dateTypeValue"
                                                        :picker-options="picker.dateOptions"></el-date-picker>
                                    </div>
                                </div>
                                <div class="ml-10">
                                    <el-button type="default"
                                               size="medium"
                                               icon="el-icon-search"
                                               @click="handleChangeDate">查询
                                    </el-button>
                                </div>
                                <!--                                <div class="ml-10">-->
                                <!--                                    <el-button-group>-->
                                <!--                                        <el-button type="default" size="medium">有简历</el-button>-->
                                <!--                                        <el-button type="default" size="medium">无简历</el-button>-->
                                <!--                                    </el-button-group>-->
                                <!--                                </div>-->
                            </div>
                            <div class="text-right">
                                <strong class="font-s16 text-bold">结果：{{ total }}</strong>
                                <!--                                <el-tag effect="dark" type="info" class="font-s14 text-bold">结果：{{ total }}</el-tag>-->
                            </div>
                        </div>
                    </div>
                    <!-- 列表 -->
                    <el-table ref="dataList"
                              row-key="id"
                              size="medium"
                              highlight-current-row
                              :stripe="true"
                              :data="personalUsers"
                              :empty-text="table.emptyText"
                              v-loading="table.loading"
                              :element-loading-text="table.loadText"
                              :element-loading-background="table.backgroundColor"
                              :default-sort="querySort"
                              @sort-change="handleQuerySort">

                        <el-table-column label="ID" fixed="left" prop="uid" width="70" :sortable="'custom'">
                            <template slot-scope="item">
                                <strong class="text-black">{{ item.row.uid }}</strong>
                            </template>
                        </el-table-column>
                        <el-table-column label="姓名" prop="name" width="80">
                            <template slot-scope="item">
                                <span :class="{'text-info-light': !item.row.name}">{{ item.row.name || '无' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="用户名" prop="username" width="120">
                            <template slot-scope="item">
                                <span :class="{'text-info-light': !item.row.username}">{{
                                        item.row.username || '无'
                                    }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="手机号码" prop="mobile" width="120">
                            <template slot-scope="item">
                                <span :class="{'text-info-light': !item.row.mobile}">{{ item.row.mobile || '无' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="头像" width="60">
                            <template slot-scope="item">
                                <el-image class="el-avatar el-avatar--circle user-avatar"
                                          fit="cover"
                                          :src="item.row.avatar ? item.row.avatar_url : ''">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-user-solid font-s18"></i>
                                    </div>
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column label="邮箱" prop="email" width="180">
                            <template slot-scope="item">
                                <span :class="{'text-info-light': !item.row.email}">{{ item.row.email || '无' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="简历" prop="email" width="50" align="center">
                            <template slot-scope="item">
                                <el-tag size="mini"
                                        :effect="item.row.is_resume ? 'dark' : 'dark'"
                                        :type="item.row.is_resume ? 'success' : 'info'">
                                    {{ item.row.is_resume ? '是' : '否' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="注册时间" prop="regtime" width="150"></el-table-column>
                        <el-table-column label="最后登录时间" prop="last_login_time" width="150"></el-table-column>
                        <el-table-column label="绑定">
                            <template slot-scope="item">
                                <div class="binding">
                                    <!-- 已绑定手机号码 -->
                                    <el-tooltip v-show="item.row.is_mobile_bind"
                                                content="已绑定手机号码"
                                                placement="top">
                                        <icon name="mobile"
                                              class="account-bind account-bind--yes"></icon>
                                    </el-tooltip>
                                    <!-- 已绑定电子邮箱 -->
                                    <el-tooltip v-show="item.row.is_email_bind"
                                                content="已绑定电子邮箱"
                                                placement="top">
                                        <icon name="email"
                                              class="account-bind account-bind--yes"></icon>
                                    </el-tooltip>
                                    <!-- 已绑定 QQ -->
                                    <el-tooltip v-show="item.row.is_qq_bind"
                                                content="已绑定 QQ"
                                                placement="top">
                                        <icon name="qq"
                                              class="account-bind account-bind--yes"></icon>
                                    </el-tooltip>
                                    <!-- 已绑定 Wechat -->
                                    <el-tooltip v-show="item.row.is_wechat_bind"
                                                content="已绑定微信"
                                                placement="top">
                                        <icon name="wechat"
                                              class="account-bind account-bind--yes"></icon>
                                    </el-tooltip>
                                    <!-- 使用小程序 -->
                                    <el-tooltip v-show="item.row.is_mini_program_bind"
                                                content="已使用小程序"
                                                placement="top">
                                        <icon name="mini-program"
                                              class="account-bind account-bind--yes"></icon>
                                    </el-tooltip>
                                    <!-- 使用 APP -->
                                    <el-tooltip v-show="item.row.is_app_bind"
                                                content="已使用 APP"
                                                placement="top">
                                        <icon name="app"
                                              class="account-bind account-bind--yes"></icon>
                                    </el-tooltip>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" width="100" align="center">
                            <template slot-scope="item">
                                <el-button-group class="r-button-group">
                                    <el-tooltip effect="dark" content="初始密码：123456" placement="top">
                                        <el-button type="primary"
                                                   size="medium">
                                            <icon name="initial"></icon>
                                        </el-button>
                                    </el-tooltip>
                                    <el-button type="warning"
                                               size="medium"
                                               @click="edit(item)">
                                        <icon name="edit"></icon>
                                    </el-button>
<!--                                    <el-dropdown size="medium">-->
<!--                                        <el-button type="info">-->
<!--                                            <i class="el-icon-arrow-down el-icon-more"></i>-->
<!--                                        </el-button>-->
<!--                                        <el-dropdown-menu slot="dropdown">-->
<!--                                            <el-dropdown-item>-->
<!--                                                <span class="font-s14">-->
<!--                                                    <icon name="mobile"></icon>解除手机-->
<!--                                                </span>-->
<!--                                            </el-dropdown-item>-->
<!--                                            <el-dropdown-item>-->
<!--                                                <span class="font-s14">-->
<!--                                                    <icon name="email"></icon>解除邮箱-->
<!--                                                </span>-->
<!--                                            </el-dropdown-item>-->
<!--                                            <el-dropdown-item>-->
<!--                                                <span class="font-s14">-->
<!--                                                    <icon name="wechat"></icon>解除微信-->
<!--                                                </span>-->
<!--                                            </el-dropdown-item>-->
<!--                                            <el-dropdown-item>-->
<!--                                                <span class="font-s14">-->
<!--                                                    <icon name="qq"></icon>解除 QQ-->
<!--                                                </span>-->
<!--                                            </el-dropdown-item>-->
<!--                                            <el-dropdown-item>-->
<!--                                                <span class="font-s14">-->
<!--                                                    <icon name="mini-program"></icon>退出小程序-->
<!--                                                </span>-->
<!--                                            </el-dropdown-item>-->
<!--                                            <el-dropdown-item>-->
<!--                                                <span class="font-s14">-->
<!--                                                    <icon name="app"></icon>退出 APP-->
<!--                                                </span>-->
<!--                                            </el-dropdown-item>-->
<!--                                            <el-dropdown-item divided>-->
<!--                                                <span class="font-s14 text-danger">-->
<!--                                                    <icon name="lock"></icon>锁定-->
<!--                                                </span>-->
<!--                                            </el-dropdown-item>-->
<!--                                        </el-dropdown-menu>-->
<!--                                    </el-dropdown>-->
                                </el-button-group>
                            </template>
                        </el-table-column>

                    </el-table>
                    <!-- 页码 -->
                    <div class="block-pagination text-center">
                        <el-pagination :total="total"
                                       :page-sizes="pagination.pageSizes"
                                       :page-size.sync="table.perPage"
                                       :current-page.sync="table.currentPage"
                                       @current-change="getQuery({per_page: table.perPage, page: table.currentPage})"
                                       background
                                       layout="sizes, prev, pager, next, jumper"></el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <!-- from dialog -->
        <component :is="dialogBox.component" :dialog="dialogBox" @close="closeDialogBox"></component>
    </div>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { namespace } from 'vuex-class'

import baseMixins from '@/mixins/base'
import DialogBoxMixins from '@/mixins/dialog'
import AuthBoxMixins from '@/mixins/cms/auth'

import { dateFormat, loading, errorMessage, successMessage } from '@/utils'

const module = namespace('cms/personalUser')

import Edit from '@/views/cms/personal/user/Edit.vue'

@Component({
  components: {
    Edit
  }
})

export default class Index extends mixins(baseMixins, DialogBoxMixins, AuthBoxMixins) {
  // Vuex
  @module.State personalUsers!: Array<any>
  @module.State total!: number
  @module.Action index!: (payload: any) => Promise<any>
  @module.Action query!: (payload: any) => Promise<any>
  @module.Action show!: (payload: any) => Promise<any>
  @module.Action destroy!: (payload: any) => Promise<any>

  // 操作组
  private operate: any = {
    loading: false,
    groupLoading: false
  }

  // picker
  private picker: any = {
    typeValue: 'register',
    typeOptions: [
      {
        value: 'register',
        label: '注册'
      }, {
        value: 'update',
        label: '更新'
      }, {
        value: 'login',
        label: '登录'
      }
    ],
    dateTypeValue: 'daterange',
    // 日期类型选项
    dateTypeOptions: [
      {
        value: 'daterange',
        label: '按天'
      }, {
        value: 'monthrange',
        label: '按月'
      }
    ],

    dateOptions: {
      disabledDate(time: any) {
        let nowTime = Date.now()
        return time.getTime() > (nowTime - (3600 * 1000 * 24))
      },
      shortcuts: [{
        text: '最近一周',
        onClick(picker: any) {
          let end = new Date()
          let start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
          end.setTime(end.getTime() - 3600 * 1000 * 24)
          picker.$emit('pick', [start, end])
        }
      }, {
        text: '最近一个月',
        onClick(picker: any) {
          let end = new Date()
          let start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
          end.setTime(end.getTime() - 3600 * 1000 * 24)
          picker.$emit('pick', [start, end])
        }
      }, {
        text: '最近三个月',
        onClick(picker: any) {
          let end = new Date()
          let start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
          end.setTime(end.getTime() - 3600 * 1000 * 24)
          picker.$emit('pick', [start, end])
        }
      }]
    },
    dateValue: ''
  }

  private querySort: any = { prop: 'uid', order: 'descending' }

  /*----- 钩子 -----*/
  public created() {
    if (!this.personalUsers.length) {
      this.getIndex()
    }
  }

  /**
   * 获取首页
   *
   * @return {Promise<any>}
   */
  private getIndex(): Promise<any> {
    this.table.loading = true
    return this.index({}).then((res) => {
      this.table.loading = false

      if (res.data.total === 0) {
        this.table.emptyText = '暂无数据'
      }

      return res
    }).catch((err) => {
      this.table.loading = false
      return err
    })
  }

  /**
   * 获取查询
   *
   * @param {any} params
   * @return Promise<any>
   */
  private getQuery(params: any): Promise<any> {
    this.setParam(params)
    this.table.loading = true
    return this.query({ params: this.params }).then((res) => {
      this.table.loading = false
      return res
    }).catch((err) => {
      this.table.loading = false
      return err
    })
  }

  /**
   * 处理搜索
   *
   * @return {void}
   */
  private handleSearch(): void {
    const params = {
      keyword: this.search.keyword,
      keyword_type: this.search.type,
      page: 1
    }
    this.search.loading = true
    this.getQuery(params).then(res => {
      this.search.loading = false
    })
  }

  /**
   * 重新载入
   *
   * @return {void}
   */
  private handleReload(): void {
    this.params = {}
    this.picker.typeValue = 'register'
    this.picker.dateTypeValue = 'daterange'
    this.picker.dateValue = ''
    this.querySort = {}
    this.operate.loading = true
    this.getIndex().then((res) => {
      this.operate.loading = false
    }).catch((err) => {
      this.operate.loading = false
    })
  }

  /**
   * 处理时间查询
   *
   * @return {void}
   */
  private handleChangeDate(): void {
    if (this.picker.dateValue) {
      const type_value = this.picker.typeValue,
        date_type_value = this.picker.dateTypeValue,
        start_date = dateFormat('yyyy-MM-dd', this.picker.dateValue[0]),
        end_ate = dateFormat('yyyy-MM-dd', this.picker.dateValue[1])
      this.getQuery({ type_value, date_type_value, start_date, end_ate })
    }
  }

  /**
   * 处理查询排序
   *
   * {column, prop, order}
   */
  private handleQuerySort({ column, prop, order }: { column: any, prop: string, order: string }): void {
    this.querySort = { prop, order }
    this.getQuery({ order_field: prop, order })
  }

  /**
   * 编辑
   *
   * @param item
   * @return {void}
   */
  private edit(item: any): void {
    const _loading = loading({ background: 'transparent' })
    this.show({ id: item.row.uid }).then((res) => {
      _loading.close()
      if (res.status === 200) {
        this.dialogBox.width = '1000px'
        this.dialogBox.component = 'edit'
        this.$nextTick(() => {
          this.dialogBox.visible = true
          this.dialogBox.index = item.$index
        })
      } else {
        errorMessage(res.message)
      }
    }).catch((err) => {
      _loading.close()
    })
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/element/element-variables.scss';

.user-avatar {
    width: 32px;
    height: 32px;
    line-height: 32px;
}

::v-deep .tooltip-bind {
    background: $--color-primary;
}

// 绑定
.binding {
    white-space: nowrap;

    .account-bind {
        margin-right: 5px;
        width: 26px;
        height: 26px;
        color: #999;
        font-size: 16px;
        line-height: 26px;
        text-align: center;
        background-color: #ddd;
        border-radius: 13px;
        cursor: pointer;

        &:hover {
            opacity: .8;
        }

        &:last-child {
            margin-right: 0;
        }

        &--yes {
            color: #fff;
            background: $--color-success;
        }

        &--qq {
            color: #fff;
            background: #4272f7;
        }

        &--wechat, &--mini--program {
            color: #fff;
            background: #00ad4a;
        }

        &--app {
            color: #fff;
            background: $--color-primary;
        }
    }
}

</style>
